<template>
    <div class="container">
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">关于我们</el-menu-item>
            <el-menu-item index="2">联系方式</el-menu-item>
            <el-menu-item index="3">常见问题</el-menu-item>
            <el-menu-item index="4">索赔材料</el-menu-item>
        </el-menu>
        <div v-show="activeIndex == 1" style="padding: 40px">
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">公司名称：</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="business_name" style="width:70%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">公司logo</div>
                    </el-col>
                    <el-col :span="21">
                        <el-upload class="avatar-uploader" :action="imgLoadPath" :show-file-list="false"
                            :on-success="handleHeaderSuccess" :before-upload="beforeHeaderUpload">
                            <img v-if="business_logo" :src="docLoadPath + business_logo" class="avatar"
                                style="max-width: 100px" />
                            <el-button v-else type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                        </el-upload>
                        <p style="color: red">(图片规格：750*350(格式：jpg,png))</p>
                    </el-col>
                </el-row>
            </div>
            <!-- <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">小程序分享图封面</div>
                    </el-col>
                    <el-col :span="21">
                        <el-upload class="avatar-uploader" :action="imgLoadPath" :show-file-list="false"
                            :on-success="handleHeaderSuccess1" :before-upload="beforeHeaderUpload">
                            <img v-if="wechat_share_image" :src="docLoadPath + wechat_share_image" class="avatar"
                                style="max-width: 100px" />
                            <el-button v-else type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                        </el-upload>
                        <p style="color: red">(图片规格：200*200(格式：jpg,png))</p>
                    </el-col>
                </el-row>
            </div> -->
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">公司座机：</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="business_tel" style="width:70%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">公司邮箱：</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="business_email" style="width:70%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">公司地址：</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="business_address" style="width:70%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">客服电话：</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="business_service_mobile" style="width:70%"></el-input>
                    </el-col>
                </el-row>
            </div>
            <div class="list-title">公司详情:</div>
            <vue-editor :content="about_us_text" ref="myTextIntro" v-if="about_us_text_show"></vue-editor> 
        </div>
        <div v-show="activeIndex == 2" style="padding: 40px">
            <el-button type="primary" icon="el-icon-plus" size="medium" @click="add">新增</el-button>
            <div style="padding:8px 0;" v-for="(item, index) in business_other_mobile" :key="index">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">联系人姓名：</div>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="item.name" style="width:70%"></el-input>
                    </el-col>
                    <el-col :span="3">
                        <div class="list-title">联系手机号码：</div>
                    </el-col>
                    <el-col :span="8">
                        <el-input v-model="item.mobile" style="width:70%"></el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-popconfirm title="确定删除吗？" @confirm="del">
                            <el-button slot="reference" type="text" icon="el-icon-delete" style="color:red;"
                                size="medium">删除</el-button>
                        </el-popconfirm>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div v-show="activeIndex == 3" style="padding: 40px">
            <vue-editor :content="frequently_asked_question" ref="frequentlyAskedQuestion"  v-if="frequently_asked_question_show"></vue-editor>
        </div>
        <div v-show="activeIndex == 4" style="padding: 40px">
            <div class="list-group">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="list-title">索赔材料pdf</div>
                    </el-col>
                    <el-col :span="21">
                        <el-input v-model="claim_materials_pdf" style="width:70%"></el-input>
                        <el-button type="success" v-if="claim_materials_pdf" style="margin-left:10px;" size="medium"
                            @click="show_pdf(agreement)">查看</el-button>
                        <el-upload class="avatar-uploader" :action="imgLoadPath" :show-file-list="false"
                            :on-success="handleHeaderSuccess2" :before-upload="beforeHeaderUpload1">
                            <el-button type="warning" icon="el-icon-upload2" size="medium">上传</el-button>
                        </el-upload>
                    </el-col>
                </el-row>
            </div>
            <vue-editor :content="claim_materials" ref="claimMaterials" v-if="claim_materials_show"></vue-editor>
        </div>
        <div class="list-group" style="display: flex; flex-direction: row; justify-content: center; margin-top: 40px">
            <el-button size="medium" type="primary" @click="preserve">保存</el-button>
        </div>
    </div>
</template>

<script>
import api from '@/api/index';
import vueEditor from '@/components/views/commons/VueUeditorWrap';
export default {
    components: {
        vueEditor
    },
    name: 'siteManagement',
    data() {
        return {
            about_us_type: 1,
            business_name: '',//公司名称 数据库 varchart类型
            about_us_text: '',// 关于我们详情 数据库 varchart类型
            business_logo: '',//公司logo 数据库 varchart类型
            wechat_share_image: '',//分享封面 数据库 varchart类型
            business_email: '',//公司邮箱 数据库 varchart类型
            business_tel: '',//公司电话 数据库 varchart类型
            business_address: '',//公司地址 数据库 varchart类型
            business_other_mobile: [], //公司其它联系方式 数据库 text类型
            business_service_mobile: '', //客服电话 数据库 text类型
            claim_materials: '',//索赔材料
            claim_materials_pdf: '',
            frequently_asked_question: '', //常见问题  数据库 text类型
            imgLoadPath: api.API_PATH + api.LOGIN_IMG,
            docLoadPath: api.IMG_PATH,
            activeIndex: '1',
            about_us_text_show:true,
            frequently_asked_question_show:false,
            claim_materials_show:false
        };
    },
    mounted() {
        //展会分类列表
        this.initAjaxDetail();
    },
    methods: {
        show_pdf(url) {
            window.open(api.IMG_PATH + url);
        },
        del(index) {
            this.business_other_mobile.splice(index, 1);
        },
        add() {
            this.business_other_mobile.push({ name: '', mobile: '' });
        },
        handleSelect(key, keyPath) {
            this.activeIndex = key;
            if(key == 1 && !this.about_us_text_show){
                this.about_us_text_show=true;
            }
            if(key == 3 && !this.frequently_asked_question_show){
                this.frequently_asked_question_show=true;
            }
            if(key == 4 && !this.claim_materials_show){
                this.claim_materials_show=true;
            }
        },
        initAjaxDetail() {
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.CONFIG_INDEX)
                .then((res) => {
                    loading.close();
                    if (res.code == 1) {
                        let business_other_mobile = [];
                        try {
                            business_other_mobile = Array.isArray(JSON.parse(res.data.business_other_mobile)) ? JSON.parse(res.data.business_other_mobile) : [];
                        } catch (e) { }
                        this.about_us_text = res.data.about_us_text;
                        this.business_name = res.data.business_name;
                        this.business_logo = res.data.business_logo;
                        this.wechat_share_image = res.data.wechat_share_image;
                        this.business_email = res.data.business_email;
                        this.business_tel = res.data.business_tel;
                        this.business_address = res.data.business_address;
                        this.business_other_mobile = business_other_mobile;
                        this.claim_materials = res.data.claim_materials;
                        this.business_service_mobile = res.data.business_service_mobile;
                        this.claim_materials_pdf = res.data.claim_materials_pdf;
                        this.frequently_asked_question = res.data.frequently_asked_question;
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        //展位类别保存按钮
        preserve() {
            const data = {
                about_us_text: this.about_us_text,
                business_name: this.business_name,
                business_logo: this.business_logo,
                wechat_share_image: this.wechat_share_image,
                business_email: this.business_email,
                business_tel: this.business_tel,
                business_address: this.business_address,
                business_other_mobile: JSON.stringify(this.business_other_mobile),
                claim_materials: this.claim_materials,
                business_service_mobile: this.business_service_mobile,
                claim_materials_pdf: this.claim_materials_pdf,
                frequently_asked_question: this.frequently_asked_question,
            };
            if(this.about_us_text_show){
                data.about_us_text=this.$refs['myTextIntro'].getContent();
            }
            if(this.frequently_asked_question_show){
                data.frequently_asked_question=this.$refs['frequentlyAskedQuestion'].getContent();
            }
            if(this.claim_materials_show){
                data.claim_materials=this.$refs['claimMaterials'].getContent();
            }
            const loading = this.$loading({ text: '加载中...' });
            this.$http
                .post(api.CONFIG_EDIT, data)
                .then((res) => {
                    loading.close();
                    console.log('展会分类列表', res);
                    if (res.code == 1) {
                        this.postionType = false;
                        this.$message.success('编辑成功');
                        this.initAjaxDetail();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
                .catch((err) => {
                    this.$message.error(err.msg);
                });
        },
        handleHeaderSuccess(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.business_logo = res.data;
        },
        handleHeaderSuccess1(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.wx_logo = res.data;
        },
        handleHeaderSuccess1(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.wx_logo = res.data;
        },
        handleHeaderSuccess2(res, file) {
            console.log(res);
            if (res.code == 0) {
                this.$message({
                    type: 'warning',
                    message: res.msg
                });
                return false;
            }
            this.claim_materials_pdf = res.data;
        },
        beforeHeaderUpload(file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['jpg', 'jpeg', 'png', 'gif', 'bmp'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传jpg,jpeg,png,gif,bmp格式文件！'
                });
                return false;
            }
        },
        beforeHeaderUpload1(file) {
            var FileExt = file.name.replace(/.+\./, '');
            if (['pdf'].indexOf(FileExt.toLowerCase()) === -1) {
                this.$message({
                    type: 'warning',
                    message: '请上传pdf格式文件！'
                });
                return false;
            }
        }
    }
};
</script>

<style scoped>
.handle-box,
.list-group {
    padding: 10px 0;
}

.red {
    color: #f56c6c;
}

.list-title {
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
}
</style>